<template>
  <div class="box">
    <el-drawer
      :visible.sync="ishTrav"
      title="借款查看"
      direction="rtl"
      size="900px"
      :with-header="false"
      :before-close="Close"
      @close="close"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="内容" name="内容">
          <div>
            <el-form ref="form" :label-position="labelPosition" :inline="true" :model="form" label-width="100px">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="借款单位">
                   
                    <span v-text="form.input1"></span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="借款部门">
                   
                    <span v-text="form.input2"></span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="借款人">
                   
                    <span v-text="form.input3"></span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="是否本人领款">
                <span v-text="form.radio"></span>
              </el-form-item>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="领款人">
                    <span v-text="form.lkr"></span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开户银行">
                    
                    <span v-text="form.Banking"></span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="汇款账户">
                    
                    <span v-text="form.Account"></span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="借款类型" style="margin-right:0px">
                    <span v-text="form.region"></span>

                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="借款金额">
                   
                    <span v-text="form.jkje"></span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="借款剩余额度">
                    
                    <span v-text="form.jksyed"></span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item class="yongtu" label="借款原因">
                    
                    <span v-text="form.yuyin"></span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评审意见" name="second">
          <v-pingshenyj :activities="activities" />
        </el-tab-pane>
        <el-tab-pane label="流程检视" name="third">
          <v-liuchengjs :dsadas="dsadas" />
        </el-tab-pane>
      </el-tabs>

    </el-drawer>

  </div>
</template>

<script>
import VPingshenyj  from '@/views/rfcwgl/components/pingShenYJ/index.vue'
import VLiuchengjs  from '@/views/rfcwgl/components/liuChengJS/index.vue'
export default {
  components: { VPingshenyj, VLiuchengjs },
  data() {
    return {
      activeName: '内容',
      sumMone: 0,
      direction: 'rtl',
      ishTrav: true,
      labelPosition: 'right',
      form: {
        input1: '华电',
        input2: '技术部',
        input3: '张三',
        radio: '是',
        lkr: '张三',
        Banking: '中国农业银行',
        Account: '41152421232132123123',
        region: '出差借款',
        jkje: 2323,
        jksyed: 43434,
        yuyin: '出差工作',
        resource: '出差需要一定生活费，所以借款'
      },
      // 时间轴信息
      activities: [
        {
          time: '2018-04-15 08:30:20',
          operationState: '发起 张三 [已办理->部门负责人]',
          result: '同意',
          color: '#0bbd87'
        },
        {
          time: '2018-04-18 09:25:18',
          operationState: '部门负责人 李四 [已办理->公司负责人]',
          result: '同意',
          color: '#0bbd87'
        },
        {
          time: '2018-04-20 10:40:20',
          operationState: '公司负责人 王五 [已办理->结束]',
          result: '同意',
          color: '#0bbd87'
        }
      ],
      imgUrl_homePage: require('@/assets/img/liucheng.png'),
      dsadas: [
        {
          operation: '发起',
          operationState: '张三 [已办理->部门负责人]',
          starttime: '2019-05-07 12:21',
          outtime: '2019-05-07 17:21'
        },
        {
          operation: '部门审批',
          operationState: '李四 [已办理->公司负责人]',
          starttime: '2019-05-07 18:21',
          outtime: '2019-05-07 20:21'
        },
        {
          operation: '公司审批',
          operationState: '王五 [已办理->结束]',
          starttime: '2019-05-07 22:21',
          outtime: '未完成'
        }
      ]
    }
  },
  computed: {
    windowHeight() {
      return this.$store.state.windowH.height
    }
  },
  watch: {
  },
  mounted() {
  },
  created() {

  },
  methods: {
    Close() {
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          this.ishTrav = false
        })
        .catch(_ => {})
    },

    /**
     * 打开侧拉列表
     */
    openAdd() {
      this.ishTrav = true
    },
    outEvection() {
      this.ishTrav = false
    },
    close() {
      // this.ishTrav = false
      // this.$router.replace({ name: 'chaiLvFBX' })
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
}
::v-deep .el-drawer__body,.el-tabs--top{
  height: 100%;
}
::v-deep .el-tabs__content {
  height: 100%;
  overflow-y: auto;
}

::v-deep .el-drawer__header {
  font-size: 24px;
  color: cornflowerblue;
}
::v-deep .lct .el-timeline{
  position: relative !important;
  width: 80% !important;
  margin: 3% auto 0px !important;
}
::v-deep .lct .el-card {
  background:#f8f8f8 !important;
}
.Information {
  position: absolute;
  z-index: 99999999;
  bottom: 0px;
  width: 100%;
  background-color: #fff;
  padding: 5px 0px;
  display: flex;
  justify-content: space-evenly;
}
.title {
  font-weight: 500;
  font-size: 20px;
  height: 30px;
  margin: 5px 0px;
}

.top {
  margin-top: 15px;
}
.footer-de {
  margin-top: 15px;
  padding: 0px 15px;
}
::v-deep label::after{
  content: ":";
  position: absolute;
}
::v-deep .display label::after{
  display: none;
}
</style>
